import * as echarts from "echarts"; //引入echarts 插件


export function bar(params) {
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
        grid: {
            left: "10%",
            right: "10%",
            height: "70%",
            bottom:"15%"
        },
        tooltip: {
            show: true,
            formatter: function (params) {
                console.log("params：", params.seriesName)
                //$.get("params.seriesName")
            },
            axisPointer: {
                type: "cross"
            }
        },
        color: ["blue", "red"],
        xAxis: {
            type: "category",
            axisTick: {
                show: false
            },
            data: [2016, 2017, 2018, 2019, 2020]
        },
        yAxis: {
            type: "value",
            name: "(万人)",
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            interval: 100
        },
        series: [
            {
                name: "职业资格证书获取情况",
                type: "bar",
                data:params.ydata1 ,
                stack: "A",
            },
        ]
    }
    if (params.angle=="round") {          
        option.series[0].itemStyle={
            barBorderRadius: [5, 5, 0, 0]
        }
    }
    mychart.setOption(option)
}

export function bar1(params) {
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
        grid: {
            left: "15%",
            bottom:"12%"
        },
        legend: {
            show: true,
            itemWidth:10,
            textStyle: {
                color: "white",
                fontSize:9,
            },
            icon: "square"

        },
        tooltip: {
            show: true,
            formatter: function (params) {
                console.log("params：", params.seriesName)
                //$.get("params.seriesName")
            },
            axisPointer: {
                type: "cross"
            }
        },
        color: params.color,
        xAxis: {
            type: "category",
            axisLabel: {
                fontSize:8

            },
            axisTick: {
                show: false
            },
            data: [2016, 2017, 2018, 2019, 2020]
        },
        yAxis: {
            type: "value",
            name: params.yAxisName,
            nameTextStyle: {
                color: "aqua",
                fontSize:8
            },
            axisLabel: {
                fontSize: 8,
                
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false,
                
            },
            splitNumber:3       
            
        },
        series: [
            {
                name: params.name1,
                type: "bar",
                data: params.yData1,
                stack: "A",
                barWidth:10
            },
            {
                name: params.name2,
                type: "bar",
                data: params.yData2,
                stack: "A",
                barWidth: 10,
                itemStyle: {
                    barBorderRadius: [3, 3, 0, 0]
                }
            },
        ]
    }
    mychart.setOption(option)
}

export function mid(params) {
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
        title: {
            text: '综合素质总分金字塔'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
          },
          toolbox: {
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            data: ['Show', 'Click', 'Visit', 'Inquiry']
          },
          series: [
            {
              name: 'Funnel',
              type: 'funnel',
              left: '10%',
              top: 60,
              bottom: 60,
              width: '80%',
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  fontSize: 20
                }
              },
              data: [
                { value: 60, name: 'Visit' },
                { value: 40, name: 'Inquiry' },
                { value: 20, name: 'Order' },
                { value: 80, name: 'Click' },
              ]
            }
          ]
    }
    
    mychart.setOption(option)
}

export function left_up(params) {
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
      tooltip:{
        // 如果触发类型是axis，则当鼠标指针浮动坐标轴上时显示相应的数据
        trigger:'axis',
        axisPointer:{
            type:'shadow'  //默认为直线，可选“line”或“shadow”
        }
    },

        xAxis: {
            type: 'category',
            data: params.xdata,
          },
          yAxis: {
            type: 'value',
            name: '人数',
            axisLine:{       //坐标轴线
              show:false,
              lineStyle:{
                  color:'rgba(255,255,255,1)'
              }
          },
              splitLine:{     //分隔线
                lineStyle:{
                  color:'rgba(255,255,255,0.5)'
              }
        }
          },
          series: [
            { 
              data: params.ydata,
              type: 'bar',
              itemStyle:{     //设置图的区域样式
                normal:{
                    // 渐变色生成器echarts.graphic.LinearGradient
                    color:new echarts.graphic.LinearGradient(0,0,0,1,[{            
                        offset:0,
                        color:'rgba(0,244,255,1)'  //0%处的颜色
                    },{
                        offset:1,
                        color:'rgba(0,77,167,1)'
                    }],false),
                    barBorderRadius:[30,30,30,30],
                    shadowColor:'rgba(0,160,221,1)',//100%处的颜色
                    shadowBlur:4,
                }
            }
            }
          ]
    }
    mychart.setOption(option)
}

export function left_dowm(params) { 
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
        title: {
            text: '班级人数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: params.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
    }

    mychart.setOption(option)
 }

export function right_up(params) { 
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['思想政治', '身心健康', '劳动实践', '志愿服务']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290]
        },
      ]
    }
    mychart.setOption(option)
}

export function right_down(params) { 
    var mychart = echarts.init(document.getElementById(params.dom))
    var option = {
      title: {
        text: 'Basic Radar Chart'
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: 'Sales', max: 6500 },
          { name: 'Administration', max: 16000 },
          { name: 'Information Technology', max: 30000 },
          { name: 'Customer Support', max: 38000 },
          { name: 'Development', max: 52000 },
          { name: 'Marketing', max: 25000 }
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: 'Allocated Budget'
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: 'Actual Spending'
            }
          ]
        }
      ]
}
    mychart.setOption(option)
}


